// 引入sme-router
import SMERouter from 'sme-router'

// 引入一个测试代码(只希望这个文件能够执行以下,被webpack编译)
// import './js/test'

// import './xxx/yyy/zzz/test.js' 配置路径别名之前
// import 'z/test.js' // 配置路径别名之后
// 引入模板
import index from 't/index'
import login from 't/login'
import admin from 't/adminList'
import adv from 't/advList'

// 引入发送请求的函数
// 注意: 如果要引入某个文件夹下面的index.js,则index.js可以忽略不写.引入路径写到这个文件夹就可以了
import { getAdmins, reqLogin, reqVerifyToken, reqLogout } from './api'

// 引入moment.js. moment的作用: 帮我们格式化日期
import moment from 'moment'
window.moment = moment // 由于模板中可以直接使用全局的对象或方法,所以将moment添加到全局,然后在模板中直接进行格式化

// 创建SMERouter实例
// root是index.html中根标签的id名
// 注意: 前端路由都有两种模式: 1. history模式(路径和视图的一一对应关系,未来修改的也是路径) 2. hash模式(浏览器地址栏的hash值和视图的一一对应关系,未来修改的是hash值)
// 完整的url地址: 协议://域名:端口号/路径?查询字符串#hash值
// sme-router默认模式是hash模式
// html5这个参数,就是让sme-router由hash模式,改为history模式
const router = new SMERouter('root', 'html5')
// 由于模板中要直接使用router,所以直接将router添加到window
// 模板中中直接调用全局的变量
window.router = router

// 配置前端路由规则
// router.route('/路径',回调函数)
router.route('/login', (req, res) => {
  // res.render运行之后,登录的结构就渲染在页面上了
  res.render(login())
  // 一定要在登录结构渲染到页面上之后获取登录按钮
  // 1. 获取登录按钮
  const loginBtn = document.getElementById('login-btn')
  // 2. 给登录按钮绑定点击事件
  loginBtn.onclick = async function (e) {
    // 阻止form的默认行为
    e.preventDefault()

    //3.收集用户输入的信息
    const username = document.getElementById('username').value.trim()
    const password = document.getElementById('password').value.trim()

    // 4. 判断用户名和密码是否有值,如果都有值,则发送请求,否则不发送请求
    if (username && password) {
      // 可以发送请求了
      const result = await reqLogin(username, password)
      // 判断code为2表示登录成功
      if (result.code === 2) {
        // 5. 存储token
        localStorage.setItem('token', result.data)
        localStorage.setItem('username', username)
        // 6. 提示用户
        toastr.success(result.message)
        // 7. 跳转到首页
        router.go(`/index?username=${username}`)
      } else {
        // 提示用户
        toastr.error(result.message)
      }
    } else {
      // 不能发请求
      toastr.error('请输入用户名和密码再进行登录')
    }
  }
})
router.route('/index', async (req, res, next) => {
  //   console.log(res.subRoute()) //返回一个用于渲染二级路由结构的div标签
  // 注意: 由于首页中有子级路由(嵌套路由),所以应该使用next

  //   console.log(req.url) // 获取当前地址栏的路径

  // 注意: 由于在/index中写了return也不能阻止/index/admin或/index/adv的回调执行,所以
  // 首页,管理员页,广告页中都要发送请求校验token
  // 由于广告页和管理页已经校验过了,所以首页校验的请求加一个判断.只在当req.url为/index的时候才去校验
  if (req.url === '/index') {
    const result = await reqVerifyToken()
    if (result.code !== 2) {
      toastr.error(result.message)
      res.redirect('/login')
      return
    }
  }

  next(
    index({
      // 将二级路由结构要渲染的div标签传入到模板中,在指定位置渲染出来
      subRoute: res.subRoute(),
      url: req.url,
      username: req.query?.username || localStorage.getItem('username'),
    })
  )

  // 获取退出登录按钮,并绑定点击事件
  const logout = document.getElementById('logout')
  logout.onclick = async function () {
    // 发送请求,请求退出
    const result = await reqLogout()
    if (result.code === 2) {
      // 服务器退出成功了,然后前端要删除本地缓存的token
      localStorage.setItem('token', '')
      // 提示用户退出成功,
      toastr.success(result.message)
      // 跳转到登录页
      router.go('/login')
    } else {
      // 提示用户退出失败
      toastr.error(result.message)
    }
  }
})
// 配置首页的二级路由管理员和广告页面
// 注意: 二级路由的路径必须以一级路由的路径开头
router.route('/index/admin', async (req, res) => {
  // 验证token
  const result1 = await reqVerifyToken()
  if (result1.code !== 2) {
    toastr.error(result1.message)
    res.redirect('/login')
    return
  }
  //发送请求获取管理员数据
  const result = await getAdmins()
  console.log(result)
  if (result.code === 2) {
    // 提示用户
    toastr.success(result.message)
    // 拿到数据了
    res.render(admin(result.data))
  } else {
    // 请求响应成功了,但是没有拿到数据
    toastr.error(result.message)
  }
})
router.route('/index/adv', async (req, res) => {
  // 验证token
  const result1 = await reqVerifyToken()
  if (result1.code !== 2) {
    toastr.error(result1.message)
    res.redirect('/login')
    return
  }

  res.render(adv())
})
router.route('*', (req, res) => {
  //   res.render('<h1>您查找的页面不存在</h1>')
  res.redirect('/login')
})

// http://localhost:9000/index/js/build.js
